<template>
	<view class="allHisMessageItem">
		<template v-if='userInfo && userInfo.avatar'>
			<u-avatar :size='34' :src="userInfo.avatar"></u-avatar>
		</template>
		<template v-else-if="messageInfo.sendUserId == 'system_notice'">
			<u-avatar :size='34' src="/static/images/system.jpg"></u-avatar>
		</template>
		<template v-else-if="messageInfo.sendUserId.indexOf('consultant_') >= 0">
			<u-avatar :size='34' src="/static/images/im/consultant@2x.png"></u-avatar>
		</template>
		<template v-else>
			<u-avatar :size='34' src="/static/images/im/lawyer@2x.png"></u-avatar>
		</template>

		<view class="infoContainer">
			<view class="titleInfo">
				<template v-if="messageInfo.sendUserId == 'system_notice'">
					<view class="userName">系统提示</view>
				</template>
				<template v-else-if="message.sendUserId.indexOf('consultant_') >= 0">
					<view class="userName">{{userInfo.name | desensitizedName}}</view>
				</template>
				<view class="userName" v-else>{{userInfo.name || '--'}}</view>
				<view class="time">{{message.whenCreated}}</view>
			</view>
			<view class="messageContent">
				<template v-if="messageInfo.messageType == 'ImgMsg'">
					<img :src="messageInfo.messageInfo.imageUri" style="width:100%" />
				</template>
				<template v-else-if="messageInfo.messageType == 'GIFMsg'">
					<img :src="messageInfo.messageInfo.remoteUrl" style="width:100%" />
				</template>
				<view style="width:100%; height: auto" v-else-if="messageInfo.messageType == 'SightMsg'">
					<video object-fit="fill" :autoplay="false" :src="messageInfo.messageInfo.sightUrl" controls>您的设备不支持 video
						标签。</video>
				</view>
				<view style="width:100%; height: auto" v-else-if="messageInfo.messageType == 'HQVCMsg'">
					<audio object-fit="fill" :autoplay="false" :src="messageInfo.messageInfo.sightUrl" controls>您的设备不支持 audio
						标签。</audio>
				</view>
				<template v-else-if="messageInfo.messageType == 'TxtMsg'">
					<template v-if="messageInfo.messageExtra == 'share'">
						<view v-if="messageInfo.messageInfo.params && Object.keys(messageInfo.messageInfo.params).length > 0"
							@click='viewShare(messageInfo.messageInfo.params)' class="shareCard">
							<u-text type="primary"  :text="`【链接】${messageInfo.messageInfo.params.name}`"></u-text>	
						</view>
						<u-text v-else type="error"  :text="`无效的分享链接`"></u-text>	
						<!-- <view v-else>无效的分享链接</view> -->
					</template>
					<view v-else>{{messageInfo.messageInfo.content}}</view>
				</template>
				<view v-else>暂不支持的消息类型</view>
			</view>
		</view>
		<u-popup :round="10" closeable title="分享" :safeAreaInsetBottom='true' mode="bottom" :show="showShare"
			@close='closeShare'>
			<view  style="padding-top: 44px; height: 80vh; overflow-y: auto; text-align: left;">
				<knowledge-detail v-if="showShare" :knowledgeId.sync="targetId" :shareBth="false"></knowledge-detail>
				<view v-else>无效链接</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		props: {
			message: {},
			userInfo: {
				require: false,
				default: function() {
					return {}
				}
			}
		},
		data(){
			return{
				showShare: false,
				shareUrl: '',
				targetId: null,
			}
		},
		computed: {
			messageInfo: function() {
				let convert = Object.assign({}, this.message)
				let ext = Object.assign({}, convert.messageInfo)
				if (convert.messageExtra == 'share') {
					ext.params = this.getShareParams(ext)
				}
				convert.messageInfo = ext
				return convert
			}
		},
		methods: {
			viewShare: function(data) {
				console.log('viewShare', data)
				this.shareUrl = data.shareUrl
				this.targetId = data.targetId
			
				this.showShare = true
			
			},
			closeShare: function() {
				this.showShare = false
				this.shareUrl = null
				this.targetId = null
			},
			getShareParams: function(data) {
				try {
					return JSON.parse(data.content)
				} catch (err) {
					console.log('getShareHtml eerr', err)
				}
				return null
			},
		}
	}
</script>
<style lang="scss" scoped>
	.allHisMessageItem {
		background-color: $uni-bg-color;
		display: flex;
		align-content: center;
		justify-content: space-between;
		padding: 10px 16px;
		border-bottom: 1px solid #e8e9ec;
		width: 100%;
		box-sizing: border-box;

		.personIcon {
			width: 2.4rem;
			height: 2.4rem;
			margin-right: 10px;
		}

		.infoContainer {
			flex-grow: 1;
			overflow: hidden;
			text-align: left;
			padding-left: 10px;

			.titleInfo {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 4px;

				.userName {
					color: #999;
					font-size: 12px;
					flex-grow: 1;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.time {
					color: #999;
					font-size: 12px;
					white-space: nowrap;
				}
			}

			.messageContent {
				word-break: break-all;
			}
		}
	}
</style>